<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<style>
.form-item {
	margin: 20px 10px;
}

.form-item>label {
	letter-spacing: 3px;
	width: 110px;
	text-align: right;
	display: inline-block;
}

.form-item>label:AFTER {
	content: ":";
}

.form-item input[type=text] {
	width: 100px;
}

.form-item.required>label:BEFORE {
	content: "*";
	color: red;
}
</style>
<!-- method="post" enctype="multipart/form-data"-->
<form id="userinfoForm" style="margin-top: 15px;" method="post" enctype="multipart/form-data">
	<input type="hidden" name="userId" value="${user.userId}"><%--  <input
		type="hidden" name="userInfoId" value="${emp.userId==user.userId}"> --%>
	<h3 style="margin-left: 200px; padding: 10px;">个人资料</h3>
	<div class="form-item " style="margin-left: 250px;">
		<label for="" style="margin-left: 120px">用户头像</label><br />
		<div id="preview"
			style="width: 110px; height: 90px; margin-left: 230px;">
			<img id="imghead" border="0" src="upload/${headimg.imagePath}"
				width="90" height="90" onclick="$('#previewImg').click();">
		</div>
		<input type="file" name="imagePath" onchange="previewImage(this)"
			style="display: none;" id="previewImg">
	</div>
	<div class="form-item " style="margin-top: -130px">
		<label for="" style="margin-left: 100px; padding: 10px;">用户账号</label>
		<input value="${user.userAccount}" name="userAccount" type="text"
			readonly="readonly" class="easyui-textbox">
	</div>
	<div class="form-item ">
		<label for="" style="margin-left: 100px; padding: 10px;">用户姓名</label>
		<input value="${userinfo.userName}" name="userName" type="text"
			class="easyui-textbox">
	</div>
	<div class="form-item ">
		<label for=""
			style="margin-left: 100px; margin-top: -50px; padding: 10px;">用户入职时间</label>
		<input value="${user.registTime}" type="text" readonly="readonly"
			data-options="required:true" class="easyui-datebox" name="registTime">
	</div>

	<div class="form-item">
		<label for="" style="margin-left: 100px; padding: 10px;">用户性别</label>&nbsp;
		男&nbsp; <input name="userSex"
			${empty userinfo||sessionScope.userinfo.userSex=='1'?'checked':''} type="radio"
			value="1" />&nbsp;&nbsp; 女&nbsp; <input name="userSex" type="radio"
			${empty userinfo||sessionScope.userinfo.userSex=='0'?'checked':''} value="0" />
	</div>
	<div class="form-item ">
		<label style="margin-left: 100px; padding: 10px;" for="">用户电话</label>
		<input value="${sessionScope.userinfo.userTel}" type="text" name="userTel"
			data-options="required:true" class="easyui-textbox" />
	</div>

	<div class="form-item ">
		<label for="" style="margin-left: 100px; padding: 10px;">用户所属部门</label>
		<input value="${userinfo.dept.deptName}" type="text"
			readonly="readonly" data-options="required:true"
			class="easyui-textbox" name="deptName">
	</div>
	<%-- <div class="form-item ">
		<label for="" style="margin-left: 100px; padding: 10px;">用户身份</label>
		<c:forEach items="${user}" var="user">
			<input value="${user.roles.roleName}" type="text"
				data-options="required:true" readonly="readonly"
				class="easyui-textbox" name="roleName">
		</c:forEach>
	</div> --%>
</form>

<script>
	//图片上传预览    IE是用了滤镜。
	function previewImage(file) {
		var MAXWIDTH = 90;
		var MAXHEIGHT = 90;
		var div = document.getElementById('preview');
		if (file.files && file.files[0]) {
			div.innerHTML = '<img id=imghead onclick=$("#previewImg").click()>';
			var img = document.getElementById('imghead');
			img.onload = function() {
				var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT,
						img.offsetWidth, img.offsetHeight);
				img.width = rect.width;
				img.height = rect.height;
				//                 img.style.marginLeft = rect.left+'px';
				img.style.marginTop = rect.top + 'px';
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				img.src = evt.target.result;
			}
			reader.readAsDataURL(file.files[0]);
		} else //兼容IE
		{
			var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
			file.select();
			var src = document.selection.createRange().text;
			div.innerHTML = '<img id=imghead>';
			var img = document.getElementById('imghead');
			img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
			var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth,
					img.offsetHeight);
			status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width
					+ ',' + rect.height);
			div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
		}
	}
	function clacImgZoomParam(maxWidth, maxHeight, width, height) {
		var param = {
			top : 0,
			left : 0,
			width : width,
			height : height
		};
		if (width > maxWidth || height > maxHeight) {
			rateWidth = width / maxWidth;
			rateHeight = height / maxHeight;

			if (rateWidth > rateHeight) {
				param.width = maxWidth;
				param.height = Math.round(height / rateWidth);
			} else {
				param.width = Math.round(width / rateHeight);
				param.height = maxHeight;
			}
		}
		param.left = Math.round((maxWidth - param.width) / 2);
		param.top = Math.round((maxHeight - param.height) / 2);
		return param;
	}
</script>